<template>
  <view class="notice-container">
    <view
      class="notice-content"
      v-for="(item, index) in noticeData"
      :key="index"
      :class="{ bg: index == isActive }"
      @touchstart="readTouch(index)"
      @touchend="readNotice(item.id, index)"
      @touchmove="touchMove"
    >
      <view class="notice-title">
        {{ item.title }}
      </view>
      <view class="notice-img" v-if="item.img == '无'"> </view>
      <!-- <view class="notice-img" v-else>
        <div class="list-image">
          <view class="clearfix">
            <view
              class="list_img_holder"
              v-for="(img, index2) in item.img.slice(0, 3)"
              :key="index2"
            >
              <image :src="img" />
            </view>
          </view>
        </div>
      </view> -->
      <view class="notice-info">{{ item.date }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      test: [1, 2],
      noticeData: [],
      isActive: 0.5,
      timeOutEvent: 1,
    };
  },
  onShow() {
    this.$MyRequest({
      url: "/notices",
    }).then((res) => {
      // console.log(res);
      this.noticeData = res.data.data;
      for (let i in this.noticeData) {
        this.noticeData[i].img = this.noticeData[i].img.split(",");
      }
      this.noticeData = this.noticeData.sort((a, b) => {
        return a.id < b.id ? 1 : -1;
      });
      // console.log(this.noticeData);
    });
  },

  methods: {
    readTouch(index) {
      this.isActive = index;
      this.timeOutEvent = 1;
    },
    touchMove() {
      // clearTimeout(this.timeOutEvent);
      this.timeOutEvent = 0;
    },
    readNotice(id, index) {
      this.isActive = 0.5;
      if (this.timeOutEvent != 0) {
        uni.navigateTo({
          url: "/pages/home/notice/NoticeReader/NoticeReader?id=" + id,
        });
      }
    },
  },
};
</script>

<style lang="scss">
@import "@/static/styles/mixin.scss";
.notice-container {
  width: 100%;
  // padding: 0 15rpx;
  box-sizing: border-box;
  .notice-content {
    padding: 0 15rpx;
    padding-top: 30rpx;

    padding-bottom: 10rpx;
    box-sizing: border-box;

    border-bottom: 1px solid rgba(221, 221, 221, 0.6);
    .notice-title {
      color: #222;
      font-weight: normal;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      font-size: 34rpx;
      line-height: 42rpx;
    }
    .notice-img {
      padding-top: 10rpx;
      .list-image {
        color: #131313;
        .clearfix {
          display: flex;
          box-sizing: border-box;
          height: 160rpx;
          .list_img_holder {
            width: 33.3%;
            overflow: hidden;
            box-sizing: border-box;
            padding-right: 10rpx;
            image {
              width: 100%;
              height: 100%;
              box-sizing: border-box;
            }
          }
          .list_img_holder:nth-of-type(3) {
            padding-right: 0;
          }
        }
      }
    }
    .notice-info {
      color: #999;
      font-size: 20rpx;
      padding-top: 10rpx;
    }
  }
}
.bg {
  background-color: rgba(214, 210, 210, 0.63);
}
</style>
